<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Flexigrid</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">
<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>
<style>

	body
		{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		}
		
	.flexigrid div.fbutton .add
		{
			background: url(css/images/add.png) no-repeat center left;
		}	

	.flexigrid div.fbutton .delete
		{
			background: url(css/images/close.png) no-repeat center left;
		}	

		
</style>
</head>
<body>
<div style="width:650px;">
<table id="flex1"  >
	<tr>
		<td>0</td>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>1</td>
		<td>1</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>2</td>
		<td>2</td>
		<td>2</td>
		<td>2</td>
	</tr>
</table>
</div>

<script type="text/javascript">

	$('#flex1').flexigrid({
	colModel : [
				{display: 'A', name : 'A', width : 40, sortable : true, align: 'center'},
				{display: 'B', name : 'B', width : 180, sortable : true, align: 'center'},
				{display: 'C', name : 'V', width : 120, sortable : true, align: 'center'},
				{display: 'D', name : 'D', width : 130, sortable : true, align: 'center'}
				],
	buttons : [
				{name: 'Add', bclass: 'add', onpress : test},
				{name: 'Delete', bclass: 'delete', onpress : test},
				{separator: true}
				],
	height:'auto',
	title: 'Countries',	
	showTableToggleBtn: true,
	width: 'auto',
	striped:false	
	});

	function test(){
		alert('123');
	}
</script>

</body>
</html>
